<template>
    <PopUps :bgIndex="1000"  :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="popups-box">
            <div class="header">
                <div class="header-top">
                    <h3>{{ props.visitTitle ? props.visitTitle : '新增拜访记录' }}</h3>
                    <i class="iconfont icon-icon-cross-empty" @click="closeVisit"></i>
                </div>
                <div class="headerMain">
                    <el-form ref="formRef" :inline="true" :model="popUpsForm" :rules="flagRules ? rules : {}"
                        class="demo-form-inline">
                        <el-form-item :prop="item.name" :label="item.label" v-for="(item, index) in popUpsFormLabel"
                            :key="index" :style="{ 'min-width': `${item.minWidth}'!important'` }"
                            :class="item.classTypeName">
                            <!-- 输入框 -->
                            <div class="optionsInput">
                                <el-input v-model="popUpsForm[item.name]" clearable
                                    v-if="!item.type || item.type == 'input'" />
                            </div>
                            <!-- 日期选框 -->
                            <el-date-picker v-if="item.type == 'picker'" v-model="popUpsForm[item.name]" type="date"
                                placeholder="请输入日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />

                        </el-form-item>
                    </el-form>

                </div>
                <div class="mainContent">
                    <h3>跟进记录</h3>
                </div>
                <div class="content">
                    <el-form style="max-width: 600px" :model="popUpsForm" label-width="auto" class="demo-ruleForm">
                        <el-form-item label="上传照片" prop="files" class="filesContent">
                            <ImageUpload :limit="6" :isShowTip="false" @update:modelValue="handlerModelValue"
                                :fileType="fileType" :modelValue="modelValue">
                            </ImageUpload>
                            <div class="el-upload__tip">
                                支持png jpg jpeg webp格式
                            </div>
                        </el-form-item>
                        <el-form-item label="备注" prop="remarks">
                            <el-input v-model="popUpsForm.remarks" type="text" autocomplete="off" />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="btn">
                    <el-button type="primary" @click="onSubmit(formRef)" class="submit">
                        新增
                    </el-button>
                    <el-button type="primary" @click="closeVisit" class="reset">取消</el-button>
                </div>
            </div>
        </div>
    </PopUps>
</template>
<script setup>
import PopUps from '@/components/My/PopUps';
const { proxy } = getCurrentInstance();

import { reactive, ref, defineEmits, defineProps } from 'vue'
import { addRecords } from '@/api/customer'
import { ElMessage, ElMessageBox } from 'element-plus';
const emit = defineEmits([ 'closeVisit'])
import { forInValueFn } from '@/hook/forIn.js'
const { forInValue } = forInValueFn()
const formRef = ref(null)
const flagRules = ref(true)
const props = defineProps({
    visitTitle: {
        type: String,
        default: ''
    },
    visitAssignmentData: {
        type: Object,
        default: {}
    }
})
// 图片回显的数据
let modelValue = ref([])
// 图片类型
let fileType = ["png", "jpg", "jpeg", "jfif"]
// 表单
let popUpsForm = ref({
    customerId: "",
    customerName: '',           // 客户名称
    contactPhone: '',           // 联系电话
    address: '',                 // 地址
    visitWay: '',           // 拜访方式
    underwayTime: '',           // 跟进时间
    underwayPerson: '',         // 跟进人
    clientUnderwayStage: '',     // 客户跟进阶段
    underwayOutcome: '',       // 跟进结果
    imageUrl: [],                    // 上传图片
    remarks: '',                    // 备注
})
// 表单数据标题
let popUpsFormLabel = ref([
    {
        name: 'customerName',
        label: '客户名称',
    },
    {
        name: 'contactPhone',
        label: '联系电话',
    },
    {
        name: 'address',
        label: '地址',
    },
    {
        name: 'visitWay',
        label: '拜访方式',
    },

    {
        name: 'underwayTime',
        label: '跟进时间',
        type: 'picker'
    },

    {
        name: 'underwayPerson',
        label: '跟进人',
    },
    {
        name: 'clientUnderwayStage',
        label: '客户跟进阶段',
    },
    {
        name: 'underwayOutcome',
        label: '跟进结果',
    },
])
// 入库信息校验
const rules = reactive({
    customerName: [
        {
            required: true,
            message: '客户名称',
            trigger: 'change',
        }
    ],
    contactPhone: [
        {
            required: true,
            message: '联系电话',
            trigger: 'change',
        },
        {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
        }
    ],
    visitWay: [
        {
            required: true,
            message: '拜访方式',
            trigger: 'change',
        }
    ],

    underwayTime: [
        {
            required: true,
            message: '跟进时间',
            trigger: 'change',
        }
    ],
    underwayPerson: [
        {
            required: true,
            message: '跟进人',
            trigger: 'change',
        }
    ],
    underwayOutcome: [
        {
            required: true,
            message: '跟进结果',
            trigger: 'change',
        }
    ],
})
// 获取的图片
const handlerModelValue = (v) => {
    popUpsForm.value.imageUrl = v
}
// 关闭
const closeVisit = () => {
    emit('closeVisit')
}

const addRecordsFn = async (params) => {
    params.imageUrl = JSON.stringify(params.imageUrl)
    let {code,msg} = await addRecords(params)
    if(code==200){
        proxy.$modal.msgSuccess(msg)
        emit('closeVisit')
    }
}

// 新增
const onSubmit = (formRef) => {
    ElMessageBox.confirm(
        '确认新增信息吗？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(async () => {
        if (!formRef) return
        await formRef.validate((valid) => {
            if (valid) {
                // 发送新增接口请求
                let parasm = popUpsForm.value
                addRecordsFn(parasm)
            }
        })
    })
}

// 数据回显
const assignmentFun = () => {
    // flagRules.value = false
    forInValue(popUpsForm, props.visitAssignmentData)
}
onMounted(() => {
    if (Object.keys(props.visitAssignmentData).length > 0) {
        assignmentFun()
    }
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.form-inline {
    :deep(.el-form-item__label) {
        width: 80px;
    }

    :deep(.el-form-item) {
        width: 190px;
    }
}

:deep(.datetimerangeClass) {
    width: 334px !important;
}

.el-input__wrapper {
    --el-select-width: 220px;
}

:deep(.el-form-item) {
    width: 220px;
}

:deep(.el-form-item__label) {
    width: 120px;
    text-align: right;
}

:deep(.el-textarea__inner) {
    width: 180px;
}

.optionsInput {
    display: flex;
    align-items: center;

    .btnPotions {
        background-color: #829BFF;
        color: #fff;
        margin-left: 15px;
        width: 50px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@mixin publicH3 {
    font-weight: 550;
    position: relative;
    font-size: 16px !important;

    &::after {
        content: '';
        width: 5px;
        height: 20px;
        background-color: #1947FF;
        border-radius: 5px;
        position: absolute;
        left: -15px;
        top: -2px;
    }
}

@mixin titlePadding {
    padding: 25px 25px 25px 45px;
}

@mixin pubilcForm {

    :deep(.el-form-item__label) {
        font-size: 14px;
    }

    :deep(.el-input__wrapper) {
        width: 132px;
    }

    :deep(.el-date-editor--datetimerange) {
        width: 240px;
    }

    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        font-size: 15px !important;
    }
}

h3 {
    @include publicH3;
}

.iconfont {
    color: #666;
    font-size: 27px;
}

.popups-box {

    .header {
        .header-top {
            z-index: 2024;

        }

        .header-top,
        .mainContent {
            @include titlePadding;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0px;
            background: #FFF;
        }

        .content {
            padding: 5px 25px 25px 45px;

            .filesContent {
                :deep(.el-form-item__label) {
                    height: 71px;
                    line-height: 71px;
                }
            }

            .upload-demo {
                width: 200px;

                :deep(.el-upload-dragger) {
                    padding: 0 !important;
                    height: 71px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .iconfont {
                    color: #999;
                }
            }

            :deep(.el-upload__tip) {
                width: 320px;
                color: #999;
            }
        }

        .headerMain {
            .demo-form-inline {
                @include pubilcForm;
            }


        }
    }

    .btn {
        padding-right: 50px;
        text-align: right;

        .el-button {
            width: 50px;
            height: 25px;
            font-size: 12px;
        }

        .reset {
            background-color: #E4E9FC;
            color: #333;
            border: none;
        }
    }
}

.forTableComOrder {
    padding: 0;
}

.optionsOrder {
    padding: 20px 20px 0 20px;
    height: 100%;

    header {
        margin-bottom: 20px;
        font-weight: 550;
    }



    .btnSub {
        width: 100%;
        text-align: right;
        margin-top: 30px;

        .el-button {
            width: 50px;
            height: 25px;
            font-size: 12px;
        }
    }
}
</style>